<template>
  <div :id="id" :class="className" :style="{width: width, height: height}" />
</template>

<script>
import echarts from 'echarts'

export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    items: {
      type: Object,
      default: () => {}
    },
    typeName: {
      type: String,
      default: '功率'
    }
  },
  data () {
    return {
      chart: null
    }
  },
  mounted () {
    this.initChart()
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart () {
      var dept = ''
      var xTitle = []
      var currentData = []
      if (Object.keys(Object.assign({}, this.items)).length) {
        var items = this.items[24]
        xTitle = items.time
        items.data.map((_, i) => {
          dept = _.name
          currentData = _.power
          console.log(this.typeName)
          currentData = this.typeName === '功率' ? _.power : this.typeName === '电压' ? _.voltageName : _.current
        })
      }
      let _chart = this.chart
      _chart = echarts.init(document.getElementById(this.id))

      _chart.setOption({
        // backgroundColor: 'rgba(33, 77, 108, 0.5)',
        title: {
          top: 20,
          text: this.typeName,
          textStyle: {
            fontWeight: 'normal',
            fontSize: 14,
            color: '#4eb9e6'
          },
          left: '20px'
        },
        tooltip: {
          trigger: 'axis',
          // position: function (pos, params, el, elRect, size) {
          //   return { top: 45 }
          // },
          extraCssText: 'width: 170px'
        },
        // legend: {
        //   top: 20,
        //   icon: 'rect',
        //   itemWidth: 20,
        //   itemHeight: 10,
        //   itemGap: 50,
        //   data: ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6'],
        //   right: '4%',
        //   textStyle: {
        //     fontSize: 14,
        //     color: '#a2cfe5'
        //   }
        // },
        grid: {
          top: 78,
          left: 60,
          right: 35,
          bottom: 20,
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisLabel: {
            margin: 18,
            textStyle: {
              fontSize: 16,
              color: '#a2cfe5'
            },
            formatter: function (params) {
              var s = params.split(' ')
              return s[0] + '\n' + s[1]
            }
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(33, 77, 108, 0.2)', 'rgba(33, 77, 108, 0.5)']
            }
          },
          data: xTitle
        }],
        yAxis: [{
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 16,
              color: '#a2cfe5'
            }
          },
          splitLine: {
            show: false
          }
        }],
        series: [
          // {
          //   name: '设备1',
          //   type: 'line',
          //   smooth: true,
          //   symbol: 'circle',
          //   symbolSize: 5,
          //   showSymbol: true,
          //   lineStyle: {
          //     normal: {
          //       width: 4,
          //       color: '#f9ab3c'
          //     }
          //   },
          //   areaStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //         offset: 0,
          //         color: 'rgba(249, 171, 60, 0.3)'
          //       }, {
          //         offset: 0.8,
          //         color: 'rgba(249, 171, 60, 0)'
          //       }], false),
          //       shadowColor: 'rgba(0, 0, 0, 0.1)',
          //       shadowBlur: 10
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: 'rgb(249, 171, 60)',li
          //       borderColor: 'rgba(249, 171, 60, 0.2)',
          //       borderWidth: 12
          //     }
          //   },
          //   data: [20, 35, 82, 91, 34, 50, 12]
          // },
          // {
          //   name: '设备2',
          //   type: 'line',
          //   smooth: true,
          //   symbol: 'circle',
          //   symbolSize: 5,
          //   showSymbol: true,
          //   lineStyle: {
          //     normal: {
          //       width: 4,
          //       color: '#cce71d'
          //     }
          //   },
          //   areaStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //         offset: 0,
          //         color: 'rgba(204, 231, 29, 0.3)'
          //       }, {
          //         offset: 0.8,
          //         color: 'rgba(204, 231, 29, 0)'
          //       }], false),
          //       shadowColor: 'rgba(0, 0, 0, 0.1)',
          //       shadowBlur: 10
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: 'rgb(204, 231, 29)',
          //       borderColor: 'rgba(204, 231, 29, 0.2)',
          //       borderWidth: 12
          //     }
          //   },
          //   data: [80, 20, 11, 25, 45, 22, 65]
          // },
          // {
          //   name: '设备3',
          //   type: 'line',
          //   smooth: true,
          //   symbol: 'circle',
          //   symbolSize: 5,
          //   showSymbol: true,
          //   lineStyle: {
          //     normal: {
          //       width: 4,
          //       color: '#73da4f'
          //     }
          //   },
          //   areaStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //         offset: 0,
          //         color: 'rgba(115, 218, 79, 0.3)'
          //       }, {
          //         offset: 0.8,
          //         color: 'rgba(115, 218, 79, 0)'
          //       }], false),
          //       shadowColor: 'rgba(0, 0, 0, 0.1)',
          //       shadowBlur: 10
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: 'rgb(115, 218, 79)',
          //       borderColor: 'rgba(115, 218, 79, 0.2)',
          //       borderWidth: 12
          //     }
          //   },
          //   data: [33, 50, 33, 18, 60, 18, 85]
          // },
          // {
          //   name: '设备4',
          //   type: 'line',
          //   smooth: true,
          //   symbol: 'circle',
          //   symbolSize: 5,
          //   showSymbol: true,
          //   lineStyle: {
          //     normal: {
          //       width: 4,
          //       color: '#52daf3'
          //     }
          //   },
          //   areaStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //         offset: 0,
          //         color: 'rgba(82, 218, 243, 0.3)'
          //       }, {
          //         offset: 0.8,
          //         color: 'rgba(82, 218, 243, 0)'
          //       }], false),
          //       shadowColor: 'rgba(0, 0, 0, 0.1)',
          //       shadowBlur: 10
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: 'rgb(82, 218, 243)',
          //       borderColor: 'rgba(82, 218, 243, 0.2)',
          //       borderWidth: 12
          //     }
          //   },
          //   data: [50, 73, 32, 43, 50, 28, 1]
          // },
          // {
          //   name: '设备5',
          //   type: 'line',
          //   smooth: true,
          //   symbol: 'circle',
          //   symbolSize: 5,
          //   showSymbol: true,
          //   lineStyle: {
          //     normal: {
          //       width: 4,
          //       color: '#5097da'
          //     }
          //   },
          //   areaStyle: {
          //     normal: {
          //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          //         offset: 0,
          //         color: 'rgba(80, 151, 218, 0.3)'
          //       }, {
          //         offset: 0.8,
          //         color: 'rgba(80, 151, 218, 0)'
          //       }], false),
          //       shadowColor: 'rgba(0, 0, 0, 0.1)',
          //       shadowBlur: 10
          //     }
          //   },
          //   itemStyle: {
          //     normal: {
          //       color: 'rgb(80, 151, 218)',
          //       borderColor: 'rgba(80, 151, 218, 0.2)',
          //       borderWidth: 12
          //     }
          //   },
          //   data: [5, 28, 50, 85, 23, 2, 18]
          // },
          {
            name: dept + ' ' + this.typeName + ': ',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: true,
            lineStyle: {
              normal: {
                width: 4,
                color: '#00d5af'
              }
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 213, 175, 0.3)'
                }, {
                  offset: 0.8,
                  color: 'rgba(0, 213, 175, 0)'
                }], false),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            itemStyle: {
              normal: {
                color: 'rgb(0, 213, 175)',
                borderColor: 'rgba(0, 213, 175, 0.2)',
                borderWidth: 12
              }
            },
            data: currentData
          }
        ]
      })

      this.$emit('func', _chart)
    }
  }
}
</script>
